<!-- 圈子-关注 -->
<template>
	<view style="padding: 40rpx 30rpx 0;">
		<view class="item flex justify-between"  @click="link">
			<view class="left flex justify-between flex-column">
				<view class="top flex align-center">
					<view class="icon flex-shrink" v-if="item.type == 1">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/jingpin.png" mode=""></image>
					</view>
					<view class="text">
						{{item.title}}
					</view>
				</view>
				<view class="btm flex justify-between">
					<view class="le flex">
						<text>{{item.author}}</text>
						<view class="vip">
							<image :src="item.gradeImage"
								mode="">
							</image>
						</view>
					</view>
					<view class="ri flex">
						<view class="child flex">
							<view class="icon">
								<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/pinlun.png" mode="">
								</image>
							</view>
							<view class="num">
								{{item.commentNum}}
							</view>
						</view>
						<view class="child flex">
							<view class="icon" v-if="!show" @click.stop="collect(item.articleListId)">
								<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/cang.png" mode="">
								</image>
							</view>
							<view class="icon" v-if="show" @click.stop="collect(item.articleListId)">
								<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/cang-active.png"
									mode="">
								</image>
							</view>
							<view class="num">
								{{nnum}}
							</view>
						</view>
						<view class="child flex">
							<view class="icon" v-if="!shaw" @click.stop="like(item.articleListId)">
								<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/zan.png" mode="">
								</image>
							</view>
							<view class="icon" v-if="shaw" @click.stop="like(item.articleListId)">
								<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/zan-active.png"
									mode="">
								</image>
							</view>
							<view class="num">
								{{num}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right flex-shrink">
				<image :src="item.image"
					mode="">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "article",
		props: {
			item: Object
		},
		data() {
			return {
				collctPost:{
					articleListId: Number
				},
				likePost:{
					articleListId: Number
				},
				show: this.item.collectType,
				shaw: this.item.likeType,
				num: this.item.likeNum,
				nnum: this.item.collectNum
			};
		},
		watch:{
			item(){
				this.shaw = this.item.likeType
				this.show = this.item.collectType
				this.num = this.item.likeNum
				this.nnum = this.item.collectNum
				console.log(1)
			},
		},
		methods:{
			//跳转详情页
			link(){
				uni.setStorageSync('pageNum', this.item.articleListId)
				uni.navigateTo({
					url: '/pagesB/articleDetail/articleDetail'
				})
			},
			//收藏
			async collect(id) {
				this.collctPost.articleListId = id
				if(this.$login()){
					let{
						data,code
					} = await this.$post('/articleList/articleCollection',this.collctPost)
					if(code == 200){
						this.show = !this.show
						if(this.show){
							this.nnum += 1
						}else{
							this.nnum -= 1
						}
						this.$emit('fresh',true)
						uni.setStorageSync('fresh',true)
					}
				}else{
					uni.navigateTo({
						url:'../../pages/login/login'
					})
				}
			},
			//点赞
			async like(id) {
				this.likePost.articleListId = id
				if(this.$login()){
					let{
						data,code
					} = await this.$post('/articleList/likeTheArticle' , this.likePost)
					if(code == 200){
						this.shaw = !this.shaw
						if(this.shaw){
							this.num+=1
						}else{
							this.num-=1
						}
					}
				}else{
					uni.navigateTo({
						url:'../../pages/login/login'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.item {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);
		padding-bottom: 40rpx;
		.left {
			width: 448rpx;
			.top {
				.icon {
					width: 35rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				.text {
					font-weight: bold;
					color: #333333;
					font-size: 28rpx;
					line-height: 40rpx;
					
				}
			}

			.btm {
				.le {
					text {
						font-weight: 500;
						color: #666666;
						font-size: 23rpx;
						margin-right: 10rpx;
					}

					.vip {
						width: 31rpx;
						height: 34rpx;
					}
				}

				.ri {
					.child {
						margin-left: 30rpx;

						.icon {
							width: 26rpx;
							height: 25rpx;
						}

						.num {
							font-weight: 500;
							color: #666666;
							font-size: 28rpx;
							margin-left: 15rpx;
						}
					}
				}
			}
		}

		.right {
			margin-left: 30rpx;
			width: 212rpx;
			height: 144rpx;
			border-radius: 24rpx;
			overflow: hidden;
		}
	}
</style>
